<template>
  <div :style="{height: height, width: width}" id="map" class="map"></div>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: "1000px",
    },
    width: {
      type: String,
      default: "100%",
    },
    center: {
      type: Object,
      //台湾地点
      default: () => ({ lng: 121.509062, lat: 25.044332 }),
    },
    zoom: {
      type: Number,
      default: 8,
    },
    enableScrollWheelZoom: {
      type: Boolean,
      default: true,
    },
    nightMode: {
      type: Boolean,
      default: true,
    },
    markers: {
      type: Array,
      default: () => [
        {
          lng: 121.509062,
          lat: 25.044332,
          color: "yellow",
          params: { name: "摄像头地址" },
        },
      ],
    },
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new BMap.Map("map"); // 创建地图实例
      const point = new BMap.Point(this.center.lng, this.center.lat); // 创建点坐标
      map.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(this.enableScrollWheelZoom); // 开启鼠标滚轮缩放

      map.setMapType(BMAP_HYBRID_MAP); // Set the map type to hybrid directly

      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_HYBRID_MAP], // Optionally, restrict to hybrid map type
        })
      );
      this.addMarkers(map);
    },
    addMarkers(map) {
      this.markers.forEach((markerData) => {
        const point = new BMap.Point(markerData.lng, markerData.lat);
        const marker = new BMap.Marker(point);
        map.addOverlay(marker); // 将标注添加到地图中
      });
    },
    convertCoordinates(lng, lat) {
      // Example of a coordinate conversion method
      // This is a placeholder for actual conversion logic
      return { lng: lng + 0.1, lat: lat + 0.1 };
    },
    setCenter(lng, lat) {
      const point = new BMap.Point(lng, lat);
      this.map.centerAndZoom(point, this.zoom);
    },
  },
};
</script>

<style>
.map {
  width: 100%;
  height: 500px;
}
</style>
